<template>
  <div class="table-list">
    <div class="table-row header">
      <div class="table-col col1">排名</div>
      <div class="table-col col2">站点名称</div>
      <div class="table-col col3">数量</div>
    </div>
    <div class="table-row content" :class="{'dark-row': key % 2 == 1, 'high-light-row': selectedRowIndex == key }" v-for="(item, key) in stationRank" :key="key" @click="onClickRow(key)">
      <div class="table-col col1" v-if="key < 3"><img :src="imgList[key]"></div>
      <div class="table-col col1" v-else>{{key + 1}}</div>
      <div class="table-col col2">{{item.name}}</div>
      <div class="table-col col3" :class="'rank-color-' + (key+1)" v-if="key < 3">{{item.value}}</div>
      <div class="table-col col3" v-else>{{item.value}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'table-list',
  components: {
  }
})

export default class TableList extends Vue {
  private stationRank: any = [{
    name: '玉洞站(下行)',
    value: 0
  }, {
    name: '清川桥北',
    value: 0
  }, {
    name: '大学大岭路口',
    value: 0
  }, {
    name: '秀灵路南',
    value: 0
  }, {
    name: '科园东五路口(下行)',
    value: 0
  }, {
    name: '安吉路中',
    value: 0
  }, {
    name: '银海玉洞路口(下行)',
    value: 0
  }, {
    name: '银海平乐路口',
    value: 0
  }, {
    name: '长虹翠竹路口东站（下行）',
    value: 0
  }, {
    name: '区医院（上行）',
    value: 0
  }]

  private firstImg: string = require('assets/images/situational-awareness/1@2x.png')
  private secondImg: string = require('assets/images/situational-awareness/2@2x.png')
  private thirdImg: string = require('assets/images/situational-awareness/3@2x.png')
  private imgList: Array<any> = [this.firstImg, this.secondImg, this.thirdImg]
  private selectedRowIndex = -1

  private onClickRow (e: any) {
    this.selectedRowIndex = e
  }
}
</script>

<style lang="scss" scoped>
.table-list {
  padding: 5px 5px 5px 30px;
  box-sizing: border-box;
  .header {
    font-family: 'PingFang Regular';
    font-weight: 500;
    background-color: rgba($color: #17AAF6, $alpha: 0.11);
    .col1 {
      font-size: 16px !important;
      color: #C5D0D4 !important;
    }
    .col2 {
      font-size: 16px !important;
      color: #C5D0D4 !important;
    }
    .col3 {
      font-size: 16px !important;
      color: #C5D0D4 !important;
    }
  }
  .dark-row {
    background-color: rgba($color: #17AAF6, $alpha: 0.08);
  }
  .high-light-row {
    box-shadow: 0px 0px 10px 10px rgba($color: #00FFF6, $alpha: 0.41) inset;
    border-radius: 2px;
    .col2 {
      color: #5BFDFF !important;
    }
    .col3 {
      color: #5BFDFF !important;
    }
    .rank-color-1 {
      color: #5BFDFF !important;
    }
    .rank-color-2 {
      color: #5BFDFF !important;
    }
    .rank-color-3 {
      color: #5BFDFF !important;
    }
  }
  .content {
    .col1 {
      font-size: 18px;
      font-family: 'PingFang Regular';
      font-weight: bold;
      font-style: italic;
      color: #FFFFFF;
    }
    .col2 {
      font-size: 18px;
      font-family: 'PingFang Regular';
      font-weight: 500;
      color: #FFFFFF;
    }
    .col3 {
      font-size: 20px;
      font-family: 'PingFang Regular';
      font-weight: bold;
      font-style: italic;
      color: #5BFDFF;
    }
    .rank-color-1 {
      color: #F94645;
    }
    .rank-color-2 {
      color: #db715f;
    }
    .rank-color-3 {
      color: #FAC82C;
    }
  }
  .table-row {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 18px;
    font-family: 'PingFang Regular';
    font-weight: 500;
    color: #FFFFFF;
    .table-col {
      img {
        width: 30px;
        height: 30px;
      }
    }
    .col1 {
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .col2 {
      width: 60%;
    }
    .col3 {
      width: 20%;
    }
  }
}
</style>
